<template>
	<view class="container">
		<!-- 页面标题 -->
		<view class="page-title">输入核销码</view>
		
		<!-- 输入核销码区域 -->
		<view class="input-section" v-if="step === 1">
			<view class="input-container">
				<input 
					class="verification-input" 
					placeholder="输入核销码" 
					v-model="verificationCode"
					placeholder-class="placeholder"
				/>
				<button class="scan-btn" @click="scanCode">识别</button>
			</view>
		</view>
		
		<!-- 核销详情 -->
		<view class="verification-detail" v-if="step >= 2">
			<view class="verification-code-display">核销码 {{verificationCode}}</view>
			
			<!-- 服务内容 -->
			<view class="service-content">
				<view class="section-title">服务内容</view>
				<view class="content-text">
					XXX标准洗车服务包含<br>
					整车泡沫冲洗擦T<br>
					轮胎轮毂冲洗清洁<br>
					车内吸尘<br>
					内饰脚垫简单除尘<br>
					(不包含虫户、水泥、沥青和顽固污渍清理等)
				</view>
			</view>
			
			<!-- 订单信息 -->
			<view class="order-info">
				<view class="section-title">订单信息</view>
				<view class="info-item">
					<text class="info-label">订单价格:</text>
					<text class="info-value">¥30.00</text>
				</view>
				<view class="info-item">
					<text class="info-label">实付金额:</text>
					<text class="info-value">¥25.00</text>
				</view>
				<view class="info-item">
					<text class="info-label">优惠金额:</text>
					<text class="info-value">¥5.00</text>
				</view>
				<view class="info-item">
					<text class="info-label">订单编号</text>
					<text class="info-value">2020032554565799</text>
				</view>
				<view class="info-item">
					<text class="info-label">支付时间</text>
					<text class="info-value">2020.03.30 14:40:45</text>
				</view>
				<view class="info-item">
					<text class="info-label">预约时间</text>
					<text class="info-value">2020.03.30 14:40</text>
				</view>
			</view>
			
			<!-- 分隔线 -->
			<view class="divider"></view>
			
			<!-- 操作按钮 -->
			<view class="action-buttons">
				<button 
					v-if="step === 2" 
					class="btn confirm-btn" 
					@click="showConfirmModal"
				>
					确认核销
				</button>
				<button 
					v-else 
					class="btn verified-btn" 
					disabled
				>
					已核销
				</button>
			</view>
		</view>
		
		<!-- 确认核销弹窗 -->
		<view class="modal" v-if="showModal">
			<view class="modal-content">
				<view class="modal-title">核销此订单</view>
				<view class="modal-body">
					请您仔细核对订单，此操作不可撤销<br>
					请谨慎操作！
				</view>
				<view class="modal-footer">
					<button class="modal-btn cancel" @click="cancelVerify">取消</button>
					<button class="modal-btn confirm" @click="confirmVerify">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				step: 1, // 1: 输入核销码, 2: 显示核销详情, 3: 已核销
				verificationCode: '',
				showModal: false
			};
		},
		methods: {
			scanCode() {
				if (!this.verificationCode) {
					uni.showToast({
						title: '请输入核销码',
						icon: 'none'
					});
					return;
				}
				
				// 模拟识别核销码
				this.step = 2;
			},
			showConfirmModal() {
				this.showModal = true;
			},
			cancelVerify() {
				this.showModal = false;
			},
			confirmVerify() {
				this.showModal = false;
				this.step = 3;
				
				uni.showToast({
					title: '核销成功',
					icon: 'success'
				});
			}
		}
	};
</script>

<style>
	.container {
		padding: 0;
		font-size: 14px;
		line-height: 24px;
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.page-title {
		padding: 15px;
		background-color: #fff;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		border-bottom: 1px solid #eee;
	}
	
	.input-section {
		padding: 30px 15px;
		background: #fff;
		margin-bottom: 10px;
	}
	
	.input-container {
		display: flex;
		align-items: center;
	}
	
	.verification-input {
		flex: 1;
		height: 44px;
		border: 1px solid #ddd;
		border-radius: 4px;
		padding: 0 15px;
		font-size: 16px;
	}
	
	.placeholder {
		color: #999;
	}
	
	.scan-btn {
		margin-left: 15px;
		background: #007aff;
		color: #fff;
		border: none;
		border-radius: 4px;
		padding: 0 20px;
		height: 44px;
		line-height: 44px;
		font-size: 16px;
	}
	
	.verification-detail {
		padding: 15px;
		background: #fff;
	}
	
	.verification-code-display {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
		padding: 10px;
		background-color: #f9f9f9;
		border-radius: 4px;
	}
	
	.service-content, .order-info {
		margin-bottom: 20px;
	}
	
	.section-title {
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 10px;
	}
	
	.content-text {
		font-size: 14px;
		line-height: 1.6;
	}
	
	.info-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}
	
	.info-label {
		color: #666;
	}
	
	.info-value {
		color: #333;
	}
	
	.divider {
		height: 1px;
		background: #f0f0f0;
		margin: 20px 0;
	}
	
	.action-buttons {
		padding: 10px 0;
	}
	
	.btn {
		width: 100%;
		padding: 12px 0;
		border-radius: 25px;
		font-size: 16px;
		font-weight: bold;
	}
	
	.confirm-btn {
		background: #007aff;
		color: #fff;
		border: none;
	}
	
	.verified-btn {
		background: #ccc;
		color: #fff;
		border: none;
	}
	
	.modal {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}
	
	.modal-content {
		width: 80%;
		background: #fff;
		border-radius: 8px;
		padding: 20px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	}
	
	.modal-title {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 15px;
	}
	
	.modal-body {
		font-size: 14px;
		line-height: 1.6;
		text-align: center;
		margin-bottom: 20px;
	}
	
	.modal-footer {
		display: flex;
		justify-content: space-between;
	}
	
	.modal-btn {
		flex: 1;
		padding: 10px 0;
		border-radius: 4px;
		font-size: 14px;
		margin: 0 5px;
	}
	
	.modal-btn.cancel {
		background: #f0f0f0;
		color: #333;
		border: 1px solid #ddd;
	}
	
	.modal-btn.confirm {
		background: #007aff;
		color: #fff;
		border: none;
	}
</style>